<div class="page-container">
    <h1 class="header"><i>Ваши сообщения</i></h1>
    <div class="content">
        <div class="add-message-wrap">
            <div class="box-message" style="display: none;"></div>
            <div id="for-wrap" style="display: none;">
                Кому: <?php echo $this->formSelect('for-user', null, array('style' => 'padding: 3px 6px; font-family: Tahoma, sans-serif; font-size: 11px;'), $this->user_list) ?>
            </div>
            <textarea id="message-textarea" style="width: 557px; margin: 5px 0; padding: 5px; font-family: Tahoma, sans-serif; font-size: 11px;" rows="1" placeholder="Введите текст сообщения..."></textarea>
            <div class="btn" style="display: none;">
                <button class="primary" onclick="send(this); return false;">Отправить</button>
            </div>
            <span id="progress_ajax" style="display: none; margin-top: 5px;" class="progress ajax-preloader-base"></span>
        </div>
        <div class="message-list-wrap">
            <div class="tab-bar">
                <div class="tab">
                    <a href="#posted" onclick="showTabContent(this);">Отправленные (<?php echo count($this->posted) ?>)</a>
                </div>
                <div class="tab">
                    <a href="#incoming" onclick="showTabContent(this);">Входящие (<?php echo count($this->incoming) ?>)</a>
                </div>
            </div>
            <div class="tab-content-wrap">
                <div class="tab-content" id="posted" style="display: none;">
                    <ul class="list-message">
                        <?php if (count($this->posted) <= 0 ): ?>
                            <li class="not-message">Вы еще не отправляли никаких соощений...</li>
                        <?php else:  foreach($this->posted as $posted): ?>
                            <li>
                                <div class="message-author">
                                    <?php echo $posted->findParentRow('Model_User', 'Incoming')->name ?>
                                </div>
                                <div class="message-content">
                                    <?php echo $posted->message ?>    
                                </div>
                                <div class="message-info">
                                    <?php 
                                        $date = new Zend_Date($posted->created, false, Pidguin_Application::getInstance()->getLocale());
                                        echo $date->toString('d MMMM в HH:mm');
                                    ?>
                                </div>
                            </li>
                        <?php endforeach; endif; ?>
                    </ul>
                </div>
                <div class="tab-content" id="incoming" style="display: none;">
                    <ul class="list-message">
                        <?php if (count($this->incoming) <= 0 ): ?>
                            <li class="not-message">Входящих сообщений нет...</li>
                        <?php else:  foreach($this->incoming as $incoming): ?>
                            <li id="<?php echo $incoming->id ?>" <?php echo ($incoming->read == 0) ? 'class="not-read" onclick="read(this);"' : '' ?>>
                                <div class="message-author">
                                    <?php echo $incoming->findParentRow('Model_User', 'Posted')->name ?>
                                </div>
                                <div class="message-content">
                                    <?php echo $incoming->message ?>    
                                </div>
                                <div class="message-info">
                                    <?php 
                                        $date = new Zend_Date($incoming->created, false, Pidguin_Application::getInstance()->getLocale());
                                        echo $date->toString('d MMMM в HH:mm');
                                    ?>
                                    <div class="right">
                                        <a href="#" onclick="answer(<?php echo $incoming->author_id ?>); return false;">Ответить</a>
                                    </div>
                                </div>
                            </li>
                        <?php endforeach; endif; ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function read(el) {
	var comment_id = $(el).attr('id');
	$.ajax({
		'url': '/personal.page/message.read',
		'type': 'post',
		'data': {
			'comment_id': comment_id
		},
		'dataType': 'json',
		'success': function(response) {
            if (response.status == 'ok') {
                $(el).removeClass('not-read');
				if (response.new_incoming > 0) {
					$('#new-incoming').html('<b>+' + response.new_incoming + '</b>').show();
				} else {
					$('#new-incoming').hide();
				}
            }
		}
	});
}

function showTabContent(el) {
    var openTab = window.location.hash || 'posted';
    if (el) {
        openTab = $(el).attr('href');
    }
    openTab = openTab.replace('#', '');
    $('.tab-bar').find('a').each(function(){
        if ($(this).attr('href').replace('#', '') == openTab) {
            $(this).parent().addClass('tab-active');
        } else {
            $(this).parent().removeClass('tab-active');
        }
    });
    $('.tab-content-wrap').find('.tab-content').each(function(){
        if ($(this).attr('id') == openTab) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}

function answer(user_id) {
    for_user.find('option').each(function(){
        if ($(this).attr('value') == user_id) {
            $(this).attr('selected', 'selected');
        }
    }); 
    message.focus();
}

showTabContent();
var message = $('.add-message-wrap #message-textarea');
var btn = $('.add-message-wrap .btn');
var for_user = $('#for-wrap');
var preloader = $('#progress_ajax');
var box_message = $('.box-message');

message.focus(function(){
	message.attr('rows', 5);
});

message.blur(function(){
	if (!message.val()) {
		message.attr('rows', 1);
		btn.hide();
        for_user.hide();
		preloader.hide();
	}
});

message.keyup(function(){
	if (message.val().length > 4) {
		for_user.show();
		btn.show();
	} else {
		for_user.hide();
		btn.hide();
		preloader.hide();
	}
});

function send(el) {
    var for_user_id = for_user.find('option:selected').attr('value');
    box_message.hide();
    if (!message.val()) {
        message.focus();
        return;
    } else if (for_user_id == 0) {
        box_message.html('Пожалуйста, укажите какому пользователю отправить сообщение.').show();
        return;
    }
    $(el).parent().hide();
    preloader.show();
    message.attr('disabled', 'disabled');
    for_user.attr('disabled', 'disabled');
    $.ajax({
		'url': '/personal.page/message.add',
		'type': 'post',
		'data': {
			'for_user':for_user_id,
			'text': message.val()
		},
		'dataType': 'json',
		'success': function(response) {
            if (response.status == 'ok') {
                box_message.html('Сообщение отправлено').show();
                setTimeout(function(){
                    box_message.fadeOut(300);
                }, 5000);
            }
            addMessageList('posted', response.message);
            message.val('').removeAttr('disabled');
            for_user.removeAttr('disabled');
			$(el).parent().show();
			preloader.hide();
		},
		'error': function(error) {
			alert('При обработке запроса возникли какие-то ошибки');
			message.removeAttr('disabled');
            for_user.removeAttr('disabled');
			$(el).parent().show();
			preloader.hide();
		}
	});
}
</script>